<template>
	<view class="my-page">
		<view class="my-top">
			<view class="title">我的</view>
			<view class="my-info">
				<image class="my-photo" :src="$getImageSrc('logo.png')" mode="widthFix"></image>
				<view class="info">
					<view class="name">{{userinfo.username}}</view>
				</view>
			</view>
		</view>
		<view class="my-container box">
			<view class="my-line" v-for='(item, i) in list' :key='i'>
				<view class="left">
					<image class="icon-img" :src="$getImageSrc(item.icon)" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="">
					<uni-icons class="right" color="#999" type="right"></uni-icons>
				</view>
			</view>
		</view>
		<view class="my-container box" style="margin-top: 26rpx;">
			<view class="my-line" @click="resetPsd">
				<view class="left">
					<image class="icon-img" :src="$getImageSrc('my-kf.png')" mode="widthFix"></image>
					<text>重置密码</text>
				</view>
				<view class="">
					<uni-icons class="right" color="#999" type="right"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'my',
		data(){
			return {
				userinfo:null,
				list:[
					{name:'帮助中心', icon:'my-kf.png'},
					{name:'联系客服', icon:'my-kf.png'},
					{name:'版本信息', icon:'my-kf.png'},
					{name:'关于我们', icon:'my-kf.png'}
					]
			}
		},
		methods:{
			resetPsd() {
				uni.navigateTo({
					url:'/subpackage/resetPassword/index'
				})
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userInfo')
		}
	}
</script>

<style lang="scss" scoped>
.my-page{
	height: 100%;
	overflow: hidden;
	background-color: #F4F5F5;
	.my-top{
		height: 500rpx;
		background: linear-gradient( 180deg, #E9FBEF 60%,  rgba(233, 251, 239, .8) 50%, rgba(233, 251, 239, .1) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		overflow: hidden;
		.title{
			font-size: 36rpx;
			color: #000;
			margin-top: 120rpx;
		}
		.my-info{
			width: 686rpx;
			margin: 130rpx auto 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.my-photo{
				width: 120rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.info{
				text-align: left;
			}
			.name{
				font-size: 40rpx;
				color: #111;
				font-weight: 600;
				line-height: 60rpx;
			}
			.tip{
				font-size: 26rpx;
				color: #929496;
			}
		}
	}
	.my-container{
		// width: 702rpx;
		.my-line{
			height: 116rpx;
			line-height: 116rpx;
			display: flex;
			justify-content: space-around;
			.left{
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			   .icon-img{
					width: 60rpx;
					margin-right: 16rpx;
			   }	
			}
			.right{
				color: #999;
			}
			
		}
	}
}
</style>